<template>
<div class="annular">
  <span class="text">{{deg}}%</span>
  <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle :cx="sz" :cy="sz" r="24" stroke="#dfdfdf" stroke-width="4" fill="none"/>
    <circle class="rota" :cx="sz" :cy="sz" r="24" :stroke-dashoffset="dash" stroke-dasharray="150"
            stroke="#ffa001" stroke-width="4" fill="none"/>
  </svg>
</div>
</template>

<script>
  /**
   * 环形图
   */
  export default{
    props: ['deg'],
    computed: {
      dash() {
        return 150 - this.deg/100*150
      }
    },
    data() {
      return {
        sz: 60 / 2
      }
    }
  }
</script>

<style lang="less">
  .annular {
    position: relative;
    width: 60px;
    height: 60px;
    .text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 13px;
      font-weight: 600;
      color: #ffa001;
    }
    .rota {
      transform: rotate(-90deg);
      transform-origin: center;
    }
  }
</style>
